<template>
  <div class="tabs">
    <div>
      <ul class="tabWrapper">
        <li v-for="(item,index) in menu" :key="index"
          :class="{[item.comp]:item.num,active : ( isActive == item.num ? true : false )}" @click="clickTab(item)">
          <template v-if="isActive == item.num">
            <icon-park :type="item.type" theme="outline" size="16" fill="#3A58B9" :strokeWidth="2" />
          </template>
          <template v-else>
            <icon-park :type="item.type" theme="outline" size="16" fill="#8691A3" :strokeWidth="2" />
          </template>
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="tabBody" v-show="isShow">
      <div :is="currentComp"></div>
    </div>
  </div>
</template>
<script>
  import {
    IconPark
  } from '@icon-park/vue/es/all';
  import selInput from "../tabs/input.vue";
  import layout from "../tabs/layout.vue";
  import refresh from "../tabs/refresh.vue";
  export default {
    components: {
      IconPark,
      // location,
      selInput,
      layout,
      refresh
    },
    data() {
      return {
        // 当前选中的组件
        // currentComp: 'location',
        currentComp: 'selInput',
        // 当前选中的li标签
        isActive: '1',
        menu: [{
            // li标签的内容
            name: '定位',
            // 当前li标签是否选中的标识
            num: '1',
            // 点击当前li标签，要显示的组件
            // comp: 'location',
            comp: 'selInput',
            // 图标主题
            type: "aiming"
          },
          {
            name: '静态布局',
            num: '2',
            comp: 'layout',
            type: "copy"
          },
          {
            name: '重新布局',
            num: '3',
            comp: 'refresh',
            type: "refresh"
          }
        ],
        isShow: false
      }
    },
    methods: {
      clickTab(params) {
        this.isActive = params.num;
        if(this.currentComp=== params.comp) {
          this.isShow= !this.isShow;
        }else {
          this.isShow= true;
        }
        this.currentComp = params.comp;
        if (params.name == "重新布局") {
          this.$eventBus.$emit("refreshLayout");
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .tabs {
    width: 330px;
    box-shadow: 0px 4px 4px 4px rgba(172, 176, 191, 0.14);
    border-radius: 2px;
  }

  // 样式
  .tabWrapper {
    overflow: hidden;
    width: 330px;
    display: flex;
    align-items: center;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #F2F2F2;

    li {
      list-style: none;
      float: left;
      margin-left: 20px;
      font-size: 16px;
      margin: 0;
      text-align: center;
      height: 20px;
      line-height: 20px;
      cursor: pointer;
    }

    li.selInput {
      flex-grow: 2;
      border-right: 1px solid #F2F2F2;
    }

    li.layout {
      flex-grow: 3;
      border-right: 1px solid #F2F2F2;
    }

    li.refresh {
      flex-grow: 3;
    }

    li.active {
      font-size: 16px;
      color: #3A58B9;
    }
  }

  .tabBody {
    width: 350px;
    background: #fff;
    overflow: hidden;
  }
</style>